<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>管理后台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" title="default" href="https://unpkg.com/amis@2.4.0/sdk/sdk.css" />
    <link rel="stylesheet" href="https://unpkg.com/amis@2.4.1-beta.0/sdk/helper.css" />
    <script src="https://unpkg.com/amis@2.1.0/sdk/sdk.js"></script>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js"></script>
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .loginTitle {
            text-align: center;
        }

        .loginTitle p {
            margin: 10px auto;
            color: black;
            font-size: 25px;
        }
    </style>
</head>

<body>
<div id="root" class="app-wrapper"></div>
<script>
    (function() {
        let tokenName = "satoken";
        let amis = amisRequire('amis/embed');

        // 清理掉vue控制台无效打印
        Vue.config.productionTip = false;
        Vue.config.devtools = false

        // 全局后端url
        const serverUrl = location.origin;

        // 清理token
        localStorage.removeItem(tokenName);

        const app = {
            type: 'page',
            title: "",
            style: {
                "backgroundImage": "linear-gradient(180deg, #86a4e9, transparent)"
            },
            cssVars: {
                "--Form-input-onFocused-borderColor": "#e8e9eb",
                "--Form-input-onHover-borderColor": "#e8e9eb",
            },
            body: {
                "type": "grid-2d",
                "cols": 12,
                "grids": [{
                    x: 5,
                    y: 5,
                    h: 1,
                    w: 4,
                    width: 200,
                    type: 'form',
                    mode: 'horizontal',
                    title: "",
                    api: {
                        url: "${serverUrl}/user/doLogin",
                        method: "post",
                        dataType: "form-data",
                        adaptor: function(payload, response, api) {
                            if (payload.status == 0) {
                                localStorage.setItem(tokenName, payload.data.token);
                                payload.msg = "登陆成功"
                            }
                            return payload;
                        },
                        requestAdaptor(api) {
                            api.body.password = CryptoJS.MD5(api.body.password).toString()
                        }
                    },
                    panelClassName: "p-r p-l p-b-md",
                    redirect: "/",
                    body: [{
                        "type": "tpl",
                        "tpl": "<div class='loginTitle'><p>管理后台</p></div>"
                    },
                        {
                            type: "input-text",
                            label: false,
                            name: "userName",
                            size: "full",
                            placeholder: "登陆名",
                            addOn: {
                                "label": "",
                                "type": "text",
                                "position": "left",
                                "icon": "fa fa-user"
                            },
                        },
                        {
                            type: "input-password",
                            label: false,
                            name: "password",
                            size: "full",
                            placeholder: "密码",
                            addOn: {
                                "label": "",
                                "type": "text",
                                "position": "left",
                                "icon": "fa fa-lock"
                            },
                        },
                        {
                            type: "checkbox",
                            label: false,
                            name: "record",
                            option: "记住密码"
                        },
                        {
                            type: "control",
                            label: false,
                            body: {
                                "type": "button",
                                "level": "primary",
                                "actionType": "submit",
                                "block": true,
                                "label": "登陆"
                            }
                        }
                    ]
                }

                ]
            }
        };

        let amisInstance = amis.embed(
            '#root',
            app, {
                serverUrl: serverUrl
            }, {
                theme: 'cxd',
            }
        );

    })();
</script>
</body>

</html>